<style scoped>
.orderlist .order{
    margin-bottom:10px;
}

.orderlist .orderinfo{
    padding:5px 15px;
    border-top:1px solid #e9e9e9;
    border-bottom:1px solid #e9e9e9;
}

.orderlist .orderinfo span{
    display: inline-block;
    width:50%;
}

.orderlist .orderinfo span.count{
    text-align: right;
    color:#EB5221;
}

.orderlist a{
    display: block;
    padding:12px;
    box-sizing: border-box;
    border-bottom:1px solid #e9e9e9;
}

.orderlist a img{
    display: block;
    width:100px;
    height:100px;
    float: left;
    margin-right:10px;
}

.orderlist a div.r{
    width:calc( 100% - 110px );
    float: left;
}

.orderlist a div.r p.title{
    color:#5D656B;
    font-size:14px;
}

.orderlist a div.r p.price{
    color:#EB5221;
}

div.empty div.ww{
    height:200px;
}

div.empty .imgbox{
    margin:0 auto;
    width:150px;
    height:150px;
    border-radius: 75px;
    background-color: #CCC;
    background-repeat: no-repeat;
    background-image: url(../assets/form_empty.png);
    background-size:100px;
    background-position:center;
}

div.empty p{
    color:#5D656B;
    text-align: center;
    margin-top: 10px;
}

div.empty a{
    margin:20px auto;
    width:100px;
    height:30px;
    line-height:30px;
    border:1px solid #5D656B;
    border-radius: 5px;
    text-align: center;
    display: block;
}

</style>
<template>
    <div>
        <div class="orderlist" v-if="order.length!==0">
            <div class="order" v-for="item in order" :key="item.id">
                <div class="orderinfo">
                    <span>订单编号:{{item.id}}</span><span class="count">￥{{item.count}}</span>
                </div>
                <router-link v-for="itemb in item.goods" :key="itemb.id" :to="'/mlapp/detail/'+itemb.id">
                    <img :src="itemb.img" alt="">
                    <div class="r">
                        <p class="title">{{itemb.name}}</p>
                        <p class="price">￥{{itemb.price}}</p>
                    </div>
                    <div class="cb"></div>
                </router-link>
            </div>
        </div>
        <div class="empty" v-if="order.length===0">
            <div class="ww"></div>
            <div class="imgbox"></div>
            <p>然而，并没有订单</p>
            <router-link to="/mlapp">去逛逛</router-link>
        </div>
    </div>
</template>
<script>
import {mapState} from 'vuex';
export default {
    computed:{
        ...mapState(['order'])
    }
}
</script>

